<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>郑在守护—帖子管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .table th {
            background-color: #f8f9fa;
        }
        .action-buttons .btn {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>帖子管理</h2>
            <button class="btn btn-primary" onclick="showAddModal()">
                <i class="bi bi-plus-lg"></i> 新增帖子
            </button>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>标题</th>
                                <th>作者</th>
                                <th>类型</th>
                                <th>状态</th>
                                <th>评论数</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="postList">
                            <!-- 帖子列表将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增/编辑帖子模态框 -->
    <div class="modal fade" id="postModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">新增帖子</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="postForm">
                        <input type="hidden" id="postId">
                        <div class="mb-3">
                            <label class="form-label">标题</label>
                            <input type="text" class="form-control" id="title" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">内容</label>
                            <textarea class="form-control" id="content" rows="5" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">类型</label>
                            <select class="form-select" id="type">
                                <option value="0">普通</option>
                                <option value="1">精华</option>
                                <option value="2">置顶</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">状态</label>
                            <select class="form-select" id="status">
                                <option value="1">正常</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="savePost()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let postModal;
        let posts = [];

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            postModal = new bootstrap.Modal(document.getElementById('postModal'));
            loadPosts();
        });

        // 加载帖子列表
        async function loadPosts() {
            try {
                const response = await fetch('/api/posts');
                posts = await response.json();
                renderPosts();
            } catch (error) {
                console.error('加载帖子列表失败:', error);
                alert('加载帖子列表失败');
            }
        }

        // 渲染帖子列表
        function renderPosts() {
            const tbody = document.getElementById('postList');
            tbody.innerHTML = posts.map(post => `
                <tr>
                    <td>${post.id}</td>
                    <td>${post.title}</td>
                    <td>${post.userId}</td>
                    <td>${getPostType(post.type)}</td>
                    <td>${getPostStatus(post.status)}</td>
                    <td>${post.commentCount}</td>
                    <td>${formatDate(post.createTime)}</td>
                    <td class="action-buttons">
                        <button class="btn btn-sm btn-primary" onclick="editPost(${post.id})">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deletePost(${post.id})">
                            <i class="bi bi-trash"></i>
                        </button>
                    </td>
                </tr>
            `).join('');
        }

        // 显示新增模态框
        function showAddModal() {
            document.getElementById('modalTitle').textContent = '新增帖子';
            document.getElementById('postForm').reset();
            document.getElementById('postId').value = '';
            postModal.show();
        }

        // 编辑帖子
        function editPost(id) {
            const post = posts.find(p => p.id === id);
            if (post) {
                document.getElementById('modalTitle').textContent = '编辑帖子';
                document.getElementById('postId').value = post.id;
                document.getElementById('title').value = post.title;
                document.getElementById('content').value = post.content;
                document.getElementById('type').value = post.type;
                document.getElementById('status').value = post.status;
                postModal.show();
            }
        }

        // 保存帖子
        async function savePost() {
            const postId = document.getElementById('postId').value;
            const post = {
                title: document.getElementById('title').value,
                content: document.getElementById('content').value,
                type: parseInt(document.getElementById('type').value),
                status: parseInt(document.getElementById('status').value)
            };

            try {
                let response;
                if (postId) {
                    response = await fetch(`/api/posts/${postId}`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(post)
                    });
                } else {
                    response = await fetch('/api/posts', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(post)
                    });
                }

                const result = await response.json();
                if (result.success) {
                    postModal.hide();
                    loadPosts();
                    alert(result.message);
                } else {
                    alert(result.message);
                }
            } catch (error) {
                console.error('保存帖子失败:', error);
                alert('保存帖子失败');
            }
        }

        // 删除帖子
        async function deletePost(id) {
            if (!confirm('确定要删除这个帖子吗？')) {
                return;
            }

            try {
                const response = await fetch(`/api/posts/${id}`, {
                    method: 'DELETE'
                });
                const result = await response.json();
                if (result.success) {
                    loadPosts();
                    alert(result.message);
                } else {
                    alert(result.message);
                }
            } catch (error) {
                console.error('删除帖子失败:', error);
                alert('删除帖子失败');
            }
        }

        // 获取帖子类型文本
        function getPostType(type) {
            const types = {
                0: '普通',
                1: '精华',
                2: '置顶'
            };
            return types[type] || '未知';
        }

        // 获取帖子状态文本
        function getPostStatus(status) {
            return status === 1 ? '正常' : '禁用';
        }

        // 格式化日期
        function formatDate(dateStr) {
            const date = new Date(dateStr);
            return date.toLocaleString();
        }
    </script>
</body>
</html> 